<template>
  <div class="lottery-footer" @click.stop>
    <div class="footer-wrapper">
      <div class="left">
        <div 
          class="clear item" 
          :class="getBuyingQuantity > 0 ? 'available' : ''"
          @click="clearSelectionState">
          <span class="icon">
          <i class="iconfont iconacbar_qingkong"></i>
        </span>
        </div>
        <input 
          type="text" 
          readonly
          v-if="getShowMoneyInput" 
          class="money-input input-style"
          :class="isUnitPriceChanged ? 'changed' : ''" 
          :value="value" 
          @click="unfoldKeyboard"
         >
        <div 
          class="cart item"
          :class="getCurrentCart.length > 0 ? 'available' : ''"
          >
          <span class="icon" @click="showOrderConfirmation">
            <i class="iconfont iconacbar_xuanhaolan"></i>
          </span>
          <span class="red-dot" v-show="this.getCurrentCart.length > 0"></span>
        </div>
        <div 
          class="add-number item" 
          :class="getBuyingQuantity > 0 ? 'available' : ''" 
          >
          <span class="icon" @click.stop="handleAddNumber">
            <i class="iconfont iconacbar_tianjia"></i>
          </span>
        </div>
      </div>
      <div 
        class="right" 
        :class="getBuyingQuantity > 0 ? 'active' : ''"
        @click.stop="buyLotteryNow"
      >立即投注</div>
    </div>
    <keyboard-phone @click="hideKeyboard" :showKeyboard="showKeyboard"></keyboard-phone>
  </div>
</template>
<script>

import KeyboardPhone from '@/components/base/phone/keyboard-phone/keyboard-phone'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    KeyboardPhone
  },
  data() {
    return {
      showKeyboard: false,
      value: '请输入金额',
      isUnitPriceChanged: false 
    }
  },
  methods: {
    // 点击添加号码
    handleAddNumber() {
      if (this.getBuyingQuantity > 0) {
        this.$emit('click')
      }
    },
    // 点击立即购买
    buyLotteryNow() {
      if (this.getBuyingQuantity > 0) {
        this.$emit('buy-now', true)
      }
    },
    updateInputValue(v) {
      this.setUnitPrice(v)
    },
    // 清空选中状态
    clearSelectionState() {
      if (this.getBuyingQuantity > 0) {
        this.setBuyingQuantity(0)
        this.clear()
      }
    },
    // 清除选中状态
    clear() {
      this.clonedLotteryState.forEach(item => {
        item.numbers.forEach(number => {
          number.selected = false
        })
      })
      this.setCurrentLotteryState(this.clonedLotteryState)
    },
    // 弹出键盘
    unfoldKeyboard() {
      this.showKeyboard = true
    },
    // 隐藏键盘
    hideKeyboard() {
      this.showKeyboard = false
    },
    // 订单确认 
    showOrderConfirmation() {
      if (this.getCurrentCart.length > 0) {
        this.$router.push({path: '/order/confirmation/' + this.getLotteryType.id})
        this.$emit('order-confirm')
      } 
    },
    ...mapMutations('lottery', {
      setCurrentLotteryState: 'SET_CURRENT_LOTTERY_STATE',
      setBuyingQuantity: 'SET_BUYING_QUANTITY',
      setUnitPrice: 'SET_UNIT_PRICE'
    })
  },
  computed:{
    ...mapGetters('lottery', [
      'getShowMoneyInput', 
      'getCurrentLotteryState', 
      'getUnitPrice', 
      'getCurrentCart',
      'getBuyingQuantity',
      'getLotteryType'
    ]),
    clonedLotteryState() {
      return JSON.parse(JSON.stringify(this.getCurrentLotteryState))
    },
  },
  watch: {
    getUnitPrice (newVal) {
      this.value = newVal
      if (newVal) {
        this.isUnitPriceChanged = true 
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .lottery-footer
    position fixed 
    left 0
    right 0
    bottom 0 
    width 100% 
    .footer-wrapper 
      height 48px
      display flex
      align-items center
      box-sizing border-box 
      justify-content space-between
      background #fff
      .left 
        display flex
        flex 1
        align-items center
        justify-content space-around
        .money-input 
          outline-style none 
          width 110px 
          height 35px
          text-align center
          box-sizing border-box 
          color $color-aux-grey
          &.changed 
            color $color-theme-dark 
        .item
          width 24px
          height 24px
          border-radius 50%
          text-align center
          background $color-text-button 
          border 1px solid $color-divide-line
          &.available 
            background $color-theme-dark 
            border-color $color-theme-dark
            .icon 
              .iconfont 
                color #fff
          // background $color-theme-dark
          // &.clear
          //   background $color-theme-red
          &.cart 
            position relative 
            .red-dot 
              position absolute 
              top -3px 
              right -7px
              content ''
              display block 
              width 7px
              height 7px 
              border-radius 50% 
              background $color-theme-red
              z-index 10000
          .icon 
            display flex 
            height 24px 
            width 24px 
            justify-content center 
            align-items center 
            .iconfont 
              font-size 24px
              color #cccdd0
      .right 
        width 110px
        line-height 46px
        text-align center
        color #cccdd0
        border 1px solid $color-divide-line 
        background $color-text-button 
        &.active 
          background $color-theme-red 
          color #fff 
          border-color $color-theme-red
        
</style>